<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .listView {
        width:10rem;
        height:20rem;
        border:1px solid #666666;
        float: left;
        text-align: center;
        margin-left: 10px;
    }
    #addUserInfo input {
        margin-top: 1rem;
        width: 80%;
    }
    .listView button {
        margin-top: 1rem;
    }
    #userList .userListView {
        width: 100%;
        height: 92%;
        overflow-y:auto;
    }

    #smallTypeList .smallTypeListView {
        width: 100%;
        height: 92%;
        overflow-y:auto;
    }

    #hospitalList{
        width: 20rem;
    }

    #hospitalList .hospitalListView {
        width: 100%;
        height: 92%;
        overflow-y:auto;
    }

    #productList{
        width: 20rem;
    }

    #productList .productListView {
        width: 100%;
        height: 92%;
        overflow-y:auto;
    }

    #addTask input {
        margin-top: 1rem;
        width: 80%;
    }

    #taskList {
        width: 30rem;
    }

    #taskList .taskListView {
        width: 100%;
        height: 92%;
        overflow-y:auto;
    }

</style>
<body>
    <div id="addUserInfo" class="listView">
        <div> 添加用户 </div>
        <input type="text" placeholder="输入微信标识"/>
        <button>添加</button>
    </div>
    <div id="userList" class="listView">
        <label> 用户列表 </label>
        <div class="userListView">
            <div>张三 <button style="margin-left: 5px"><input style="display: none" value="1"/>删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
            <div>张三 <button style="margin-left: 5px">删除</button></div>
        </div>
    </div>
    <div id="smallTypeList" class="listView">
        <label> 类型列表 </label>
        <div class="smallTypeListView">
            <div class="smallType"><input type="text" hidden="hidden" value=""/>HPV</div>
            <div class="smallType">HPV</div>
            <div class="smallType">HPV</div>
            <div class="smallType">HPV</div>
            <div class="smallType">HPV</div>
            <div class="smallType">HPV</div>
        </div>
    </div>
    <div id="hospitalList" class="listView">
        <label> 医院列表 </label>
        <div class="hospitalListView">
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
        </div>
    </div>
    <div id="productList" class="listView">
        <label> 产品列表 </label>
        <div class="productListView">
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
            <div class="hospital"><label style="margin-right: 20px">1</label>成华区某某卫生服务站</div>
        </div>
    </div>
    <div id="addTask" class="listView">
        <div> 添加任务 </div>
        <select id="sessionId" style=" margin-top: 1rem;">
            <option value ="1">张三</option>
            <option value ="1">李四</option>
        </select>
        <input id="hospitalId" type="text" placeholder="输入医院id"/>
        <input id = "productId" type="text" placeholder="输入产品id"/>
        <input id = "taskStartTime" type="text" placeholder="开始时间精确到秒"/>
        <input id = "taskEndTime" type="text" placeholder="结束时间精确到秒"/>
        <button>添加</button>
    </div>
    <div id="taskList" class="listView">
        <label> 任务列表 </label>
        <div class="taskListView">
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label><input type="text" style="display: none" value=""/><button>删除</button></div>
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label></div>
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label></div>
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label></div>
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label></div>
            <div class="task">张三<label style="margin-left: 20px">2021-11-01 17:00:00</label><label style="margin-left: 20px">2021-11-01 17:10:00</label> <label style="margin-left: 20px">成功</label></div>
        </div>
    </div>
    <div class="listView">
        <button id="flushProxy">刷新代理</button>
    </div>



</body>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var baseUrl = "http://localhost:9980"
        var get = function(url,param){
            var result;
            $.ajax({
                type: "GET",
                url: baseUrl+url,
                data: param,
                async: false,
                dataType: "json",
                success: function(data){

                   if (data.code == 0){
                       result =  data.data;
                   }
                },fail:function (e) {
                    alert(e);
                }
            });
            return result;
        };
        var post = function(url,param){
            var result;
            $.ajax({
                type: "POST",
                url: baseUrl+url,
                contentType: "application/json",
                data: JSON.stringify(param),
                async: false,
                dataType: "json",
                success: function(data){
                    if (data.code == 0){
                        return data.data;
                    }
                },fail:function (e) {
                    alert(e);
                }
            });
            return result;
        };


        var addUserInfo = function(){
            var sessionId = $("#addUserInfo input").val();
            var addResult = get("/ym/getUserInfo",{"sessionId":sessionId});
        };


        var getUserList = function(){
            var userList = get("/ym/getUserList",{});
            $(".userListView").empty();
            $("#sessionId").empty();
            var html = ''
            var option = '';
            $.each(userList, function(index, userinfo){
                html += '<div>'+userinfo.cname+'<button><input style="display: none" value="'+userinfo.sessioId+'"/>删除</button></div>'
                option += '<option value ="'+userinfo.sessioId+'">'+userinfo.cname+'</option>'
            });
            $(".userListView").html(html);
            $("#sessionId").html(option);

        };

        var removeUser = function(sessionId){
            var removeResult = get("/ym/delUserInfo",{"sessionId":sessionId});
        };


        var smallTypes = function(){
            var smallTypesResult = get("/ym/getType",{});
            $(".smallTypeListView").empty();
            var html = ''
            $.each(smallTypesResult, function(index, typeInfo){
                html += '<div class="smallType"><input type="text" hidden="hidden" value="'+typeInfo.id+'"/>'+typeInfo.alias+'</div>'
            });
            $(".smallTypeListView").html(html);
        };


        var hospitals = function(id){
            var hospitalsResult = get("/ym/getHospitals",{"type":id});
            $(".hospitalListView").empty();
            var html = ''
            $.each(hospitalsResult, function(index, hospitalInfo){
                html += '<div class="hospital"><label style="margin-right: 20px">'+hospitalInfo.id+'</label>'+hospitalInfo.cname+'</div>'
            });
            $(".hospitalListView").html(html);
        };

        var products = function(id){
            var productsResult = get("/ym/getProducts",{"hospitalId":id});
            $(".productListView").empty();
            var html = ''
            $.each(productsResult, function(index, productsInfo){
                html += '<div class="hospital"><label style="margin-right: 20px">'+productsInfo.id+'</label>'+productsInfo.text+'</div>'
            });
            $(".productListView").html(html);
        };

        var addTask = function(param){
            var addTaskResult = post("/ym/addTask",param);
        };

        var removeTask = function(param){
            var removeTaskResult = get("/ym/removeTask",param);
        };

        var tasks = function(){
            var tasksResult = get("/ym/getTasks",{});
            $(".taskListView").empty();
            var html = ''
            var userList = get("/ym/getUserList",{});
            $.each(tasksResult, function(index, taskInfo){
                var name;
                var result;
                for (index in userList) {
                    if (userList[index].sessioId == taskInfo.sessionId) {
                        name = userList[index].cname
                    }
                }
                if (taskInfo.orderStatus != null){
                    result = "成功";
                }else {
                    result = "等待结果";
                }
                html += '<div class="task">'+name+'<label style="margin-left: 20px">'+taskInfo.taskStartTime+'</label><label style="margin-left: 20px">'+taskInfo.taskEndTime+'</label> <label style="margin-left: 20px">'+result+'</label><button><input type="text" style="display: none" value="'+taskInfo.id+'"/>删除</button></div>'
            });
            $(".taskListView").html(html);
            $(".taskListView div").find("button").click(function(){
                var param = {
                    "id":$(this).find("input").val()
                }
                removeTask(param);
                tasks();
            })
        }




        //查询用户列表
        getUserList();
        //类型列表
        smallTypes();
        //任务列表
        tasks();

        $("#addUserInfo button").click(function () {
            addUserInfo();
            getUserList();
        })

        $(".userListView").find("button").click(function () {
            var id = $(this).find("input").val();
            removeUser(id);
            getUserList();
        })

        $(".smallType").click(function () {
            var id = $(this).find("input").val();
            hospitals(id);

            $(".hospital").click(function () {
                var id = $(this).find("label").html();
                products(id);
            })
        })

        $("#addTask").find("button").click(function () {
           var param = {
               "sessionId":$("#sessionId").val(),
               "taskStartTime":$("#taskStartTime").val(),
               "taskEndTime":$("#taskEndTime").val(),
               "productId":$("#productId").val(),
               "hospitalId":$("#hospitalId").val()
           }
            addTask(param);
            tasks();
        })

        $("#flushProxy").click(function () {
            get("/ym/flushProxys",{});
        })








    });
</script>
</html>